<template>
  <div>
    <el-card class="box-card">
      <mytitle :showLine="false">{{ $route.meta.title }}</mytitle>
      <el-tabs v-model="info.state" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部"   name=" "></el-tab-pane>
            <el-tab-pane label="待付款" name="0"></el-tab-pane>
            <el-tab-pane label="已付款" name="1"></el-tab-pane>
            <el-tab-pane label="已取消" name="2"></el-tab-pane>
       </el-tabs>
      <el-table ref="singleTable" :header-cell-style="{color: '#292B2B', background: '#EAF9F4'}" :data="tableData" highlight-current-row @current-change="handleCurrentChange" border
        style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column property="orderNo" label="订单编号" width="250" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column property="placeAnOrderTime" label="下单时间" width="250" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.placeAnOrderTime | formatDate }}</div>
           </template>
        </el-table-column>
        <el-table-column property="fruitTreeNum" label="果树数量" width="80" align="center">
        </el-table-column>
        <el-table-column property="orderMoney" label="订单金额" width="120" align="center">
        </el-table-column>
        <el-table-column property="payWay" label="支付方式" width="120" align="center">
        </el-table-column>
        <el-table-column label="订单状态" width="120" align="center">
           <template slot-scope="scope">
            <el-tag :type="stateType[scope.row.orderState].icon">{{ stateType[scope.row.orderState].name }}</el-tag>
           </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteRow(scope.row)"  v-if="!scope.row.orderState==1" type="text" >取消付款</el-button>
            <el-button @click="orderDetail(scope.row)" type="text" >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-box">
          <el-pagination
            background
            @current-change="handleCurrents"
            :current-page.sync="info.pageNum"
            :page-size="info.pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
    </div>
    </el-card>
   
  </div>
</template>
<script>
 import {getAllOrder,cancelPayment} from "../util/api.js"

export default {
  data() {
    return {
      stateType:{
        '0':{
          name:"待付款",
          icon:"danger"
        },
        '1':{
          name:"已付款",
          icon:"success"
        },
        '2':{
          name:"已取消",
          icon:"info"
        }
      },
      info:{
          pageNum:1,
          pageSize:6,
          state:" "
        },
      total:0,
      loading:false,
      tableData: [],
      currentRow: null
    }
  },
  mounted(){
     this.getOrderlist()
  },
  methods: {
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
  async  getOrderlist(){
         this.loading=true
         let res = await getAllOrder(this.info)
        //console.log(res)
         if(res.code!=200)return
         this.loading=false
         this.tableData = res.data.rows
         this.total= res.data.total
    },
    handleClick(tab, event){
      // console.log(this.info.state);
      this.getOrderlist()
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handleCurrents(val) {
          this.info.pageNum = val
          this.getOrderlist()
          // console.log(`当前页: ${val}`);
      },
   async deleteRow(row) {
    this.$confirm('是否取消订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await cancelPayment({orderNo:row.orderNo})
          if(res.code!=200)return
          row.orderState = 2
          // console.log(res)
          this.$message({
            type: 'success',
            message: '订单已取消!'
          });
        })
    },
    orderDetail(row){
       this.$router.push({
        path:'/orderManagment/examine',
        query:{
          state:row.orderState,
          data:encodeURIComponent(JSON.stringify(row))
        }
       })
    }
  }
}
</script>
<style lang="less" scoped>
.box-card {
  width: 100%;
  margin: 14px 0;
}
.pagination-box{
      width: 100%;
      padding: 20px;
      .el-pagination{
        text-align: right;
      }
    }
 /deep/.el-tabs__header{
  margin:0!important;
 } 
 /deep/.el-tabs__item.is-active{
    color: #52B484!important;
}
/deep/.el-tabs__item:hover {
    color: #52B484!important;
    cursor: pointer;
}
/deep/.el-tabs__item{
    color: #3A3D3D!important;
}   
</style>